<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-header>生活用品</el-header>
          <el-row>
            <el-table
                  :data="tableData"
                  style="width: 100%"
                  @cell-click="link">
                  <el-table-column
                    label="排名"
                    width="50px"
                    type="index">
                  </el-table-column>
                  <el-table-column
                    label="名称"
                    width="150px">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="评分"
                    width="80">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.score }}</span>
                    </template>
                  </el-table-column>
                </el-table>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-header>办公物品</el-header>
          <el-row>
            <el-table
                  :data="tableData"
                  style="width: 100%"
                  @cell-click="link">
                  <el-table-column
                    label="排名"
                    width="50px"
                    type="index">
                  </el-table-column>
                  <el-table-column
                    label="名称"
                    width="150px">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="评分"
                    width="80">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.score }}</span>
                    </template>
                  </el-table-column>
                </el-table>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-header>常用工具</el-header>
          <el-row>
            <el-table
                  :data="tableData"
                  style="width: 100%"
                  @cell-click="link">
                  <el-table-column
                    label="排名"
                    width="50px"
                    type="index">
                  </el-table-column>
                  <el-table-column
                    label="名称"
                    width="150px">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="评分"
                    width="80">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.score }}</span>
                    </template>
                  </el-table-column>
                </el-table>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-header>其他</el-header>
          <el-row>
            <el-table
                  :data="tableData"
                  style="width: 100%"
                  @cell-click="link">
                  <el-table-column
                    label="排名"
                    width="50px"
                    type="index">
                  </el-table-column>
                  <el-table-column
                    label="名称"
                    width="150px">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="评分"
                    width="80">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{ scope.row.score }}</span>
                    </template>
                  </el-table-column>
                </el-table>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
   export default {
        data() {
          return {
            tableData: [{
              name: '王小虎',
              score:4.5,
              address: '上海市普陀区金沙江路 1518 弄',
              link:''
            },
            {
              name: '王小虎',
              score:4.5,
              address: '上海市普陀区金沙江路 1518 弄',
              link:''
            },
            {
              name: '王小虎',
              score:4.5,
              address: '上海市普陀区金沙江路 1518 弄',
              link:''
            },
            {
              name: '王小虎',
              score:4.5,
              address: '上海市普陀区金沙江路 1518 弄',
              link:''
            },
            {
              name: '王小虎',
              score:4.5,
              address: '上海市普陀区金沙江路 1518 弄',
              link:''
            },
            {
              name: '王小虎',
              score:4.5,
              address: '上海市普陀区金沙江路 1518 弄',
              link:''
            },
            {
              name: '王小虎',
              score:4.5,
              address: '上海市普陀区金沙江路 1518 弄',
              link:''
            },
            {
              name: '王小虎',
              score:4.5,
              address: '上海市普陀区金沙江路 1518 弄',
              link:''
            }]
          }
        },
        methods:{
          link(data){
            console.log(data)
            // this.$router.push("/")
          }
        }
      }
</script>

<style>
.el-descriptions__header{
  line-height: 20px
}
.el-table__header-wrapper{
  line-height: 20px
}
.cell{
  text-align: center
}
</style>
